const state = {
    dragStartItem: null,
    dragItem: null,
    selectComplex: null, // 选中组件信息
    selectComplexId: null, // 选中组件编码
    selectComplexList: [], // 多选组件
    complexData: [], // 编辑器组件列表
    complexhotData: [], // 历史记录 ( 撤消、重做 )
    complexhotIndex: -1, // 历史记录索引
    // 右键菜单
    contextMenu: {
        show: false,
        left: 0,
        top: 0,
        z: 1024,
    },
    // 组件原始的宽高
    origin: null,
    // 组件属性分类
    group: [{
            title: "基础属性",
            key: "basics",
        },
        {
            title: "文本属性",
            key: "text",
        },
        {
            title: "标题属性",
            key: "title",
        },
        {
            title: "图例",
            key: "legend",
        },
        {
            title: "坐标轴",
            key: "axis",
        },
        {
            title: "外观",
            key: "model",
        },
        {
            title: "其他",
            key: "other",
        },
    ],
}

const mutations = {
    SET_ORIGIN: (state, data) => {
        state.origin = data
    },
    DRAG_START: (state, data) => {
        state.dragStartItem = data;
    },
    DRAG_ITEM: (state, data) => {
        state.dragItem = data;
    },
    SAVE_COMPLEX: (state, data) => {
        state.complexData = data;
    },
    PUT_COMPLEX: (state, data) => {
        state.complexData.push(data);
    },
    DELE_COMPLEX: (state, index) => {
        state.complexData.splice(index, 1);
    },
    UPDATE_COMPLEX: (state, list) => {
        state.complexData = list;
    },
    COPY_COMPLEX: (state, data) => {
        state.complexData.push(data);
    },
    SELECT_COMPLEX: (state, data) => {
        state.selectComplex = data;
    },
    CHNAGE_MENU: (state, data) => {
        state.contextMenu = data;
    },
};

const actions = {
    // 右键菜单
    settingMenu({ commit }, data) {
        commit("CHNAGE_MENU", data);
    },
    // 选中的组件
    selectComplex({ commit }, data) {
        commit("SELECT_COMPLEX", data);
    },
    // 保存组件
    saveComplex({ commit }, data) {
        commit("SAVE_COMPLEX", data);
    },
    // 新增组件 （拖拽组件到编辑器并释放组件）
    putComplex({ commit }, data) {
        const drag = JSON.parse(JSON.stringify(state.dragStartItem));
        const complex = {
            id: new Date().valueOf(),
            count: 1,
            name: drag.item.name, // 组件名
            title: drag.item.title,
            lock: false, // 锁定
            hidden: false, // 隐藏
            flex: false, // 固定定位
            focused: false, // 是否选中
            w: drag.item.width,
            h: drag.item.height,
            x: data.x - drag.offset.x,
            y: data.y - drag.offset.y,
            z: 50,
            r: 0, // 旋转角度
            opacity: 1, // 透明度
            config: drag.item.config, // 组件属性
        };
        state.dragStartItem = null;
        commit("PUT_COMPLEX", complex);
        commit("DRAG_ITEM", complex);  
    },
    // 删除组件
    deleComplex({ commit }, data) {
        const list = state.complexData;
        const findIndex = list.findIndex((e) => {
            return e.id === data.id;
        });
        if (findIndex > -1) commit("DELE_COMPLEX", findIndex);
    },
    // 复制组件
    copyComplex({ commit }, data) {
        const complex = JSON.parse(JSON.stringify(data));
        // 修改复制组件的编码
        complex.id = new Date().valueOf();
        commit("COPY_COMPLEX", complex);
    },
    // 添加组件 （可通过导入配置表新增）
    addComplex({
        commit
    }, data) {
        const complex = JSON.parse(JSON.stringify(data));
        // 修改复制组件的编码
        complex.id = new Date().valueOf();
        commit("PUT_COMPLEX", complex);
    },
    // 修改组件
    updateComplex({ commit }, data) {
        const list = state.complexData;
        const complex = JSON.parse(JSON.stringify(data));
        const findIndex = list.findIndex((e) => {
            return e.id === complex.id;
        });
        if (findIndex > -1) {
            list[findIndex] = complex
            commit("SAVE_COMPLEX", list);
        }
    },
    // 记录被拖拽组件信息和鼠标点击坐标 (缓存)
    setDrag({ commit }, data) {
        commit("DRAG_START", data);
    },
    // 记录组件原始的宽高
    setOrigin({
        commit
    }, data) {
        commit('SET_ORIGIN', data)
    },
};

export default {
    namespaced: true,
    state,
    mutations,
    actions,
};